<template>
	<transition name="el-zoom-in-center">
		<view
			class="el-popper is-pure is-light el-dropdown__popper"
			:style="{ left: `${state.position.x - 25}px`, top: `${state.position.y + 8}px` }"
			v-show="state.show"
		>
			<view class="box">
				<ul class="el-dropdown-menu">
                    <template v-for="(item,index) in state.menuList" :key="index">
                        <li role="separator" v-if="!!item.divided" class="el-dropdown-menu__item--divided"></li>
                        <li class="el-dropdown-menu__item"  :class="{ 'is-disabled': !!item.disabled }" @click="menuClick(item)">
                            <dx-icon size="14" :name="item.icon"></dx-icon>
                            <span class="ml-5px">{{ item.label }}</span>
                        </li>
                    </template>
				</ul>
				<span class="el-popper__arrow"></span>
			</view>
		</view>
	</transition>
</template>
<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue';
interface Menu {
	name: string;
	label: string;
	icon: string;
    divided?:boolean;
	disabled?: boolean;
}
interface Position {
	x: number;
	y: number;
}
const state = reactive({
	show: false,
	menuList: [] as Menu[],
	position: {} as Position,
});
// 绑定关系
const $emit = defineEmits(['menuClick']);
function open(menu: any, position: Position) {
	state.menuList = menu;
	state.position = position;
	state.show = true;
}
function close() {
	state.show = false;
}
function menuClick(row:Menu) {
	if(row.disabled) return;
	$emit('menuClick', row);
	close();
}
defineExpose({
	open,
	close,
});
onMounted(() => {
	document.addEventListener('click', close);
});
onUnmounted(() => {
	document.removeEventListener('click', close);
});
</script>
<style lang="scss" scoped>
.el-popper {
	position: fixed;
	.box {
		position: relative;
		width: 100%;
		height: 100%;
		.el-dropdown-menu__item{
			&:hover {
				&::v-deep {
					path {
						stroke: var(--el-color-primary) !important;
					}
				}
			}
			&.is-disabled{
				&::v-deep {
					path {
						stroke: var(--el-text-color-disabled) !important;
					}
				}
			}
		}
		.el-popper__arrow {
			position: absolute;
			left: 20px;
			top: -5px;
		}
	}
}
</style>
